import React, { useState, useEffect } from 'react';
import "@/views/Index/Index.scss"
import { Layout, Input, Badge, Avatar, Drawer,Form ,Button,notification} from 'antd';
import * as service from '../../api/index';

import { Outlet, useNavigate } from 'react-router-dom';
import { SearchOutlined, BellOutlined, UserOutlined, CaretDownOutlined } from '@ant-design/icons';
import { useSelector, useStore, useDispatch } from 'react-redux'
import * as zzservice from '../../api/indexzz';

const { Header, Content, Sider } = Layout;


interface Props {
}

function Index(props: Props) {
  const [lie, setLie] = useState<any>(
    [
      {
        "img": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u931.png",
        "text": "首页"
      },
      {
        "img": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u934.png",
        "text": "应用中心"
      }
    ]
  )
  const [zhuang, setZhuang] = useState(0)
  const [open, setOpen] = useState(false);
  const [tui, setTui] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [lu, setLu] = useState(
    [
      {
        "id": 1,
        "name": "车辆",
        "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u984.png",
        "route": "/index/Vehicle"
      },
      {
        "id": 2,
        "name": "新闻",
        "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u987.png",
        "route": "/index/Newsmanage"
      },
      {
        "id": 3,
        "name": "员工",
        "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u960.png",
        "route": "/index/staff"
      },
      {
        "id": 4,
        "name": "资产",
        "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u999.png",
        "route": "/index/assets"
      },
      {
        "id": 5,
        "name": "薪酬",
        "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u966.png",
        "route": "/index/moneys"
      },
      {
        "id": 6,
        "name": "会议室预定",
        "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u981.png",
        "route": "/index/conference"
      },
      {
        "id": 7,
        "name": "绩效",
        "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u972.png",
        "route": "/index/achievements"
      },
      {
        "id": 8,
        "name": "审批",
        "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u978.png",
        "route": "/index/Approval"
      },
      {
        "id": 9,
        "name": "考勤",
        "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u963.png",
        "route": "/index/checknav"
      }
    ]
  );
  const [xiaoxi, setXiaoxi] = useState([]);
  let navigate = useNavigate()
  let selector: any = useSelector(state => state);
  console.log(selector.user);
  


  const [ope, setOpe] = useState(false);

  const showDrawer = () => {
    setOpe(true);
  };

  const onClose = () => {
    setOpe(false);
  };

  var qingqiu = async () => {
    // var res = await service.user_hang()
    // var res1 = await service.user_yiji()
    // var res2 = await service.user_xiaoxi()
    var res2 = await zzservice.user_message()
    // setLu(res.data)
    // setLie(res1.data)
    setXiaoxi(res2.data.data)
    
    
    

  }
  useEffect(() => {
    qingqiu()
  }, [])
  var daohang = (index: any) => {
    if (index == 0) {
      navigate('/index/home')
    }
    if (index == 1) {
      setOpen(!open);
    }
    setZhuang(index)
  }
  var xitong = () => {
    navigate('/login')
  }
  var tiaozhuan = (item: any) => {  
    console.log(item);
    
    navigate(item.route)
    setOpen(!open);
  }
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const onFinish =async (values: any) => {
    console.log('Success:', values);
    
      var res4 = await zzservice.user_updatePassword(values)
      notification.success({ message: '密码修改成功!' });
      console.log(res4.data);
      setIsModalOpen(false);
      navigate('/login')
    
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  // 密码修改弹框
  var xiugai=()=>{
    setTui(!tui)
    setIsModalOpen(true)
  }
  return (
    <div className='index'>
      <Layout>
        <Header className="header">
          <div className="left">
            <div className="logo" >
              OA办公后台管理系统
            </div>
            <div className='lie'>
              {
                lie.map((item: any, index: any) => {
                  return (
                    <div key={index} onClick={() => { daohang(index) }} className={zhuang == index ? 'active' : 'xin'}  style={{cursor:'pointer'}}>
                      <img src={item.img} alt="" />
                      <div>{item.text}</div>
                    </div>
                  )
                })
              }
            </div>
            {
              open ? (<div className='li'>
                {

                  lu.map((item: any, index) => {
                    return (
                      <div key={index} className='item' onClick={() => { tiaozhuan(item) }} style={{cursor:'pointer'}}>
                        <img src={item.pic} alt="" />
                        <div>{item.name}</div>
                      </div>
                    )
                  })

                }
              </div>) : ''
            }
            <div className="h1">
              <Input size="large" placeholder="请输入关键字" prefix={<SearchOutlined />} />
            </div>
          </div>

          <div className="right">
            <Badge count={xiaoxi.length} size="small" className='xian' >
              <BellOutlined style={{ fontSize: 26, color: '#fff' }} onClick={showDrawer} />
            </Badge>
            <Avatar shape="square" size="large" icon={<UserOutlined />} src={<img src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201709%2F27%2F20170927212833_eWMFv.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1679550613&t=9a836eba3b57a41936510f06eb18a067' alt="avatar" />} />
            <span className='ming'>{selector.user}</span>
            <CaretDownOutlined style={{ color: '#fff' }} onClick={() => { setTui(!tui) }} />
            {
              tui ? (<div className='hh' style={{cursor:'pointer'}}>
                <div onClick={() => { xiugai() }}>密码修改</div>
                <div onClick={() => { xitong() }}>退出系统</div>
              </div>) : ''
            }
{
            isModalOpen ? (
              <div className='tan'>
                
                <Form
                
                  name="basic"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 16 }}
                  style={{ maxWidth: 400 }}
                  initialValues={{ remember: true }}
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  autoComplete="off"
                >
                  <div style={{fontWeight:700,marginLeft:50}}>密码修改</div>
                  <Form.Item
                    label="旧密码："
                    name="password"
                    rules={[{ required: true, message: '密码不能为空!' }]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    label="新密码："
                    name="newPassword"
                    rules={[{ required: true, message: '密码不能为空!!' }]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button onClick={handleCancel} style={{marginRight:10}}>
                      取消
                    </Button>
                    <Button type="primary" htmlType="submit">
                      确认
                    </Button>
                  </Form.Item>
                </Form>
              </div>

            ) : ''
          }
          </div>
          <Drawer title="消息通知" placement="right" onClose={onClose} open={ope} size='default'>

            {
              xiaoxi.map((item: any, index: any) => {
                return (
                  <div key={index} style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px' }}>
                    <div style={{ display: 'flex' }}>
                      <div className="kk1" style={{ width: 30, height: 30, backgroundColor: 'rgb(223, 208, 79)', borderRadius: '50%', textAlign: 'center' }}> <img src={item.pic} alt="" style={{ marginTop: 5 }} /> </div>
                      <div className="kk2" style={{ fontSize: 12, marginTop: 0, marginLeft: 10 }}>
                        <div>{item.name}</div>
                        <div>{item.text}</div>
                      </div>
                    </div>
                    <div className="you" style={{ fontSize: 10 }}>{item.day}</div>

                  </div>
                )
              })
            }
          </Drawer>
        </Header>
        <Outlet />
      </Layout>

    </div>
  );
}

export default Index;